{% extends 'bootstrap_children.html' %}
{% block content %}
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header"><i class="fa  fa-wrench  "></i> 用户管理中心</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa   fa-gear"></i> 用户管理
                    </div>
                    <div class="panel-body">

                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#home" data-toggle="tab"><i class="fa fa-user"></i>用户</a></li>
                            <li><a href="#user_group" data-toggle="tab"><i class="fa fa-group"></i>用户组</a></li>
                            <li><a href="#user_role" data-toggle="tab"><i class="fa fa-user-plus"></i>角色</a></li>
                        </ul>


                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="home">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <br>
                                        <legend><i class="fa  fa-list-alt  "></i>用户列表</legend>
                                        <div>
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th class="center">用户名称</th>
                                                    <th class="center">真实名字</th>
                                                    <th class="center">邮箱地址</th>
                                                    <th class="center">电话</th>
                                                    <th class="hidden-xs center">超级管理员</th>
                                                    <th class="hidden-480 center">最后登录</th>
                                                    <th class="center">注册日期</th>
                                                    <th class="center">是否激活</th>
                                                    <th class="center">操作</th>
                                                </tr>
                                                </thead>

                                                <tbody>
                                                {% for ds in userList %}
                                                    <tr>
                                                        <td>
                                                            <label>
                                                                <span class="lbl"></span>
                                                                <a href="{% url 'user_setting' ds.id %} ">
                                                                    {{ ds.username }}
                                                                </a>
                                                            </label>
                                                        </td>
                                                        <td>
                                                            {{ ds.real_name }}
                                                        </td>
                                                        <td>
                                                            {{ ds.email }}
                                                        </td>
                                                        <td>
                                                            {{ ds.userprofile.phone }}
                                                        </td>
                                                        <td>
                                                            {{ ds.email }}
                                                        </td>
                                                        <td class="hidden-480">
                                                            {% if ds.is_superuser %}
                                                                <span class="label label-success arrowed">
																			是
																		</span>
                                                            {% else %}
                                                                <span class="label label-danger arrowed-in">
																			否
																		</span>
                                                            {% endif %}
                                                        </td>
                                                        <td>
                                                            {{ ds.last_login|date:"Y/m/d H:i:s" }}

                                                        </td>
                                                        <td class="hidden-480">
                                                            {{ ds.date_joined|date:"Y/m/d H:i:s" }}

                                                        </td>
                                                        <td class="hidden-480">
                                                            {% if ds.is_active %}
                                                                <span class="label label-success arrowed">
																			已激活
																		</span>
                                                            {% else %}
                                                                <span class="label label-danger arrowed-in">
																			未激活
																		</span>
                                                            {% endif %}
                                                        </td>
                                                        <td>
                                                            <div class="btn-group-vertical">
                                                                <button type="button"
                                                                        class="btn btn-default dropdown-toggle"
                                                                        data-toggle="dropdown">
                                                                    <abbr title="用户控制"><i class="fa fa-edit"></i></abbr>
                                                                    <span class="caret"></span>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        {% if ds.is_active %}
                                                                            <a href="javascript:"
                                                                               onclick="onBtnHandleUser(this,{{ ds.id }},'{{ ds.username }}',0,'inactive')">取消激活</a>
                                                                        {% else %}
                                                                            <a href="javascript:"
                                                                               onclick="onBtnHandleUser(this,{{ ds.id }},'{{ ds.username }}',1,'active')">激活用户</a>
                                                                        {% endif %}
                                                                    </li>
                                                                    <li class="divider"></li>
                                                                    <li>
                                                                        <a href="javascript:"
                                                                           onclick="onBtnHandleUser(this,{{ ds.id }},'{{ ds.username }}',0,'delete')">删除用户</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="hr "></div>

                                        <div class="row">
                                            <div class="col-sm-5 pull-right">
                                                <h4 class="pull-right">
                                                    Total Users :
                                                    <span class="red"><code>{{ userList|length }}</code></span>
                                                </h4>
                                            </div>
                                            <div class="col-sm-7 pull-left">
                                                <button class="btn btn-sm btn-default pull-left" class="btn btn-primary"
                                                        data-toggle="modal" data-target="#myAddUserModal">
                                                    <i class="fa fa-plus"></i>
                                                    <span class="bigger-110">新增用户</span>
                                                </button>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="tab-pane fade" id="user_group">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <br>
                                        <legend><i class="fa  fa-list-alt  "></i>用户组列表</legend>
                                        <div>
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th class="center">id</th>
                                                    <th class="center">组名</th>
                                                    <th class="text-center">操作</th>
                                                </tr>
                                                </thead>

                                                <tbody>
                                                {% for ds in groupList %}
                                                    <tr>
                                                        <td>
                                                            <label>
                                                                <span class="lbl"></span>
                                                                <a href="{% url 'group_setting' ds.id %}">
                                                                    {{ ds.id }}
                                                                </a>
                                                            </label>
                                                        </td>
                                                        <td>
                                                            {{ ds.name }}
                                                        </td>
                                                        <td class="text-center">
                                                            <a href="{% url 'group_setting' ds.id %}">
                                                                <button type="button" class="btn btn-default">
                                                                    <abbr  title="编辑"><i class="glyphicon glyphicon-edit"></i></abbr>
                                                                </button>
                                                            </a>
                                                            <button type="button" class="btn btn-default"
                                                                    onclick="delGroupData(this,'group',{{ ds.id }})">
                                                                <abbr title="删除">
                                                                    <i class="glyphicon glyphicon-trash"></i></abbr></button>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="hr "></div>

                                        <div class="row">
                                            <div class="col-sm-5 pull-right">
                                                <h4 class="pull-right">
                                                    Total Groups :
                                                    <span class="red"><code>{{ groupList|length }}</code></span>
                                                </h4>
                                            </div>
                                            <div class="col-sm-7 pull-left">
                                                <button class="btn btn-sm btn-default pull-left" class="btn btn-primary"
                                                        data-toggle="modal" data-target="#myGroupModal">
                                                    <i class="fa fa-plus"></i>
                                                    <span class="bigger-110">新增用户组</span>
                                                </button>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                              <div class="tab-pane fade" id="user_role">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <br>
                                        <legend><i class="fa  fa-list-alt  "></i>用户角色列表</legend>
                                        <div>
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th class="center">id</th>
                                                    <th class="center">角色名</th>
                                                    <th class="text-center">操作</th>
                                                </tr>
                                                </thead>

                                                <tbody>
                                                {% for ds in roleList %}
                                                    <tr>
                                                        <td>
                                                            <label>
                                                                <span class="lbl"></span>
                                                                <a href="{% url 'user_role' ds.id  %}">
                                                                    {{ ds.id }}
                                                                </a>
                                                            </label>
                                                        </td>
                                                        <td>
                                                            {{ ds.name }}
                                                        </td>
                                                        <td class="text-center">
                                                            <a href="{% url 'user_role' id=ds.id %}">
                                                                <button type="button" class="btn btn-default">
                                                                    <abbr  title="编辑"><i class="glyphicon glyphicon-edit"></i></abbr>
                                                                </button>
                                                            </a>
                                                            <button type="button" class="btn btn-default"
                                                                    onclick="delroleData(this,'role',{{ ds.id }})">
                                                                <abbr title="删除">
                                                                    <i class="glyphicon glyphicon-trash"></i></abbr></button>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="hr "></div>

                                        <div class="row">
                                            <div class="col-sm-5 pull-right">
                                                <h4 class="pull-right">
                                                    Total Roles :
                                                    <span class="red"><code>{{ roleList|length }}</code></span>
                                                </h4>
                                            </div>
                                            <div class="col-sm-7 pull-left">
                                                <button class="btn btn-sm btn-default pull-left" class="btn btn-primary"
                                                        data-toggle="modal" data-target="#myRoleModal">
                                                    <i class="fa fa-plus"></i>
                                                    <span class="bigger-110">新增角色</span>
                                                </button>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>


                        <!-- /.row (nested) -->
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>

    <div class="modal fade" id="myAddUserModal" tabindex="-1" role="dialog" aria-labelledby="myAddUserModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myAddUserModalLabel">
                        新增用户
                    </h4>
                </div>
                <div class="modal-body">
                    <form id="register" class="main form-horizontal">
                        <fieldset>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><i class="fa fa-user"></i></label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" placeholder="Username" name="username"
                                           required/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><i class="fa fa-envelope"></i></label>
                                <div class="col-sm-6">
                                    <input type="email" class="form-control" placeholder="Email" name="email" required/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label"><i class="fa fa-lock"></i></label>
                                <div class="col-sm-6">
                                    <input type="password" class="form-control" placeholder="Password" name="password"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><i class="fa fa-retweet"></i></label>
                                <div class="col-sm-6">
                                    <input type="password" class="form-control" placeholder="Repeat password"
                                           name="c_password"/>
                                </div>
                            </div>


                            <div class="space-24"></div>

                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="userRegister(this)">
                        添加
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div class="modal fade" id="myGroupModal" tabindex="-1" role="dialog" aria-labelledby="myGroupModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myGroupModalLabel">
                        添加用户组
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" id="group_assets">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right"
                                   for="form-field-4"><strong>组名</strong></label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="name"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="addGroupData(this)">
                        添加
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div class="modal fade" id="myRoleModal" tabindex="-1" role="dialog" aria-labelledby="myRoleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myRoleModalLabel">
                        添加角色
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" id="role_assets">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right"
                                   for="form-field-4"><strong>角色名</strong></label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="name"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="addRoleData(this)">
                        添加
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <script type="text/javascript">

        function addGroupData(obj, op) {
            var btnObj = $(obj);
            btnObj.attr('disabled', true);
            var post_data = {};
            var putUrl = '{% url 'group_list_api' %}';
            var form = document.getElementById('group_assets');
            for (var i = 0; i < form.length; ++i) {
                var name = form[i].name;
                var value = form[i].value;
                if (value.length == 0) {
                    window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
                    return false;
                }

            }
            ;
            post_data[name] = value;
            $.ajax({
                dataType: "JSON",
                url: putUrl, //请求地址
                type: "POST",  //提交类似
                data: post_data, //提交参数
                success: function (response) {
                    btnObj.removeAttr('disabled');
                    window.wxc.xcConfirm("用户组添加成功", window.wxc.xcConfirm.typeEnum.success);
                    location.reload();
                },
                error: function (response) {
                    btnObj.removeAttr('disabled');
                    window.wxc.xcConfirm("用户组添加失败", window.wxc.xcConfirm.typeEnum.error);
                    location.reload();
                }
            })
        }

        function addRoleData(obj, op) {
            var btnObj = $(obj);
            btnObj.attr('disabled', true);
            var post_data = {};
            var putUrl = '/api/group/';
            var form = document.getElementById('group_assets');
            for (var i = 0; i < form.length; ++i) {
                var name = form[i].name;
                var value = form[i].value;
                if (value.length == 0) {
                    window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
                    return false;
                }

            }
            ;
            post_data[name] = value;
            $.ajax({
                dataType: "JSON",
                url: putUrl, //请求地址
                type: "POST",  //提交类似
                data: post_data, //提交参数
                success: function (response) {
                    btnObj.removeAttr('disabled');
                    window.wxc.xcConfirm("角色添加成功", window.wxc.xcConfirm.typeEnum.success);
                    location.reload();
                },
                error: function (response) {
                    btnObj.removeAttr('disabled');
                    window.wxc.xcConfirm("角色添加失败", window.wxc.xcConfirm.typeEnum.error);
                    location.reload();
                }
            })
        }

        function modfGroupData(obj, op, id) {
            var btnObj = $(obj);
            btnObj.attr('disabled', true);
            var post_data = {};
            window.wxc.xcConfirm("请输入新名称：", window.wxc.xcConfirm.typeEnum.input, {
                onOk: function (result) {
                    if (result.length == 0) {
                        /* 如果没有输入字符串则直接退出 */
                        return;
                    }
                    ;
                    if (op == "service") {
                        var putUrl = '/api/service/' + id + '/';
                        post_data['service_name'] = result;
                    }
                    else if (op == "group") {
                        var putUrl = '/api/group/' + id + '/';
                        post_data['name'] = result;
                    }
                    else if (op == "zone") {
                        var putUrl = '/api/zone/' + id + '/';
                        post_data['zone_name'] = result;
                    }
                    else if (op == "line") {
                        var putUrl = '/api/line/' + id + '/';
                        post_data['line_name'] = result;
                    }
                    else if (op == "raid") {
                        var putUrl = '/api/raid/' + id + '/';
                        post_data['raid_name'] = result;
                    }
                    else if (op == "status") {
                        var putUrl = '/api/status/' + id + '/';
                        post_data['status_name'] = result;
                    }
                    ;
                    $.ajax({
                        type: 'PUT',
                        url: putUrl,
                        data: post_data,
                        success: function (response) {
                            btnObj.removeAttr('disabled');
                            window.wxc.xcConfirm("修改成功", window.wxc.xcConfirm.typeEnum.success);
                            location.reload();
                        },
                        error: function (response) {
                            btnObj.removeAttr('disabled');
                            window.wxc.xcConfirm("修改失败！", window.wxc.xcConfirm.typeEnum.error);
                            location.reload();
                        },
                    });

                }
            });
        }

        function delGroupData(obj, op, id) {
            var btnObj = $(obj);
            btnObj.attr('disabled', true);
            var post_data = {};
            if (op == "service") {
                var putUrl = '/api/service/' + id + '/';
            }
            else if (op == "group") {
                var putUrl = '/api/group/' + id + '/';
            }
            else if (op == "zone") {
                var putUrl = '/api/zone/' + id + '/';
            }
            else if (op == "line") {
                var putUrl = '/api/line/' + id + '/';
            }
            else if (op == "raid") {
                var putUrl = '/api/raid/' + id + '/';
            }
            else if (op == "status") {
                var putUrl = '/api/status/' + id + '/';
            }
            $.ajax({
                dataType: "JSON",
                url: putUrl, //请求地址
                type: "DELETE",  //提交参数
                success: function (response) {
                    btnObj.removeAttr('disabled');
                    window.wxc.xcConfirm("资产删除成功", window.wxc.xcConfirm.typeEnum.success);
                    location.reload();

                },
                error: function (response) {
                    btnObj.removeAttr('disabled');
                    window.wxc.xcConfirm("资产删除失败~", window.wxc.xcConfirm.typeEnum.error);
                    location.reload();
                }
            })
        }

        function userRegister(obj) {
            var btnObj = $(obj);
            btnObj.attr('disabled', true);
            var required = ['email', 'username', 'password', 'c_password'];
            var server_data = {};
            var form = document.getElementById('register');
            for (var i = 1; i < form.length; ++i) {
                var name = form[i].name;
                var value = form[i].value;
                idx = $.inArray(name, required);
                if (idx >= 0 && value.length == 0) {
                    window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
                    btnObj.removeAttr('disabled');
                    return false;
                }
                else if (value.length != 0 && name.length != 0) {
                    server_data[name] = value;
                }
            }
            ;
            $.ajax({
                dataType: "JSON",
                url: '{% url "user_register" %}', //请求地址
                type: "POST",  //提交类似
                data: server_data,  //提交参数
                success: function (response) {
                    btnObj.removeAttr('disabled');
                    if (response["code"] == 200) {
                        window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
                        location.reload();
                    }
                    else {
                        window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
                    }

                },
                error: function (response) {
                    btnObj.removeAttr('disabled');
                    window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
                }
            })
        }

        function onBtnHandleUser(obj, id, user, status, op) {
            var post_data = {};
            var post_type = "PUT";
            var btnObj = $(obj);
            if (op == 'active') {
                var txt = "是否确认激活？"
                post_data['is_active'] = status;
            }
            else if (op == 'inactive') {
                var txt = "是否取消激活用户？"
                post_data['is_active'] = status;
            }
            else if (op == 'superuser') {
                var txt = "是否确认授权为超级管理员？"
                post_data['is_superuser'] = status;
            }
            else if (op == 'dissuperuser') {
                var txt = "是否确认取消超级管理员权限？"
                post_data['is_superuser'] = status;
            }
            else if (op == 'delete') {
                var txt = "是否确认删除用户？"
                var post_type = "DELETE";
            }
            ;
            post_data['username'] = user;
            var option = {
                title: "操作用户(" + user + ")",
                btn: parseInt("0011", 2),
                onOk: function () {
                    $.ajax({
                        type: post_type,
                        url: '/api/user/' + id + '/',
                        data: post_data,
                        success: function (response) {
                            window.wxc.xcConfirm("用户资料更新成功", window.wxc.xcConfirm.typeEnum.success);

                        },
                        error: function (response) {
                            window.wxc.xcConfirm("用户资料更新失败", window.wxc.xcConfirm.typeEnum.error);
                        },
                    });
                },
                onCancel: function () {
                },
                onClose: function () {
                }
            }
            window.wxc.xcConfirm(txt, "custom", option);
        }
    </script>

{% endblock %}